<template>
	<div>
		<el-card class="!border-none pt-4" shadow="never">
			<el-form class="ls-form el-set-form" :model="formData" inline>
				<el-form-item label="订单编号">
					<el-input placeholder="请输入" v-model="formData.Number" clearable />
				</el-form-item>
				<el-form-item label="销售人员">
					<el-input placeholder="请输入" v-model="formData.Number" clearable />
				</el-form-item>
				<el-form-item label="客户信息">
					<el-input placeholder="请输入" v-model="formData.Number" clearable />
				</el-form-item>
				<el-form-item>
					<el-button class="main-color1 w-[76px]">重置</el-button>
					<el-button class="w-[76px]" type="primary" color="#0054A6">查询</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="text-right">
				<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">
					<span>批量通过</span>
				</el-button>
			</div>
			<el-tabs v-model="tabsActive" @tab-change="getLists">
				<el-tab-pane v-for="(item, index) in tabsMap" :key="index" :label="item.name" :name="item.type"
					lazy></el-tab-pane>
			</el-tabs>
			<el-table ref="multipleTableRef" :data="lists" @selection-change="handleSelectionChange"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column type="selection" width="55" />
				<el-table-column label="订单编号">
					<template #default="scope">{{ scope.row.date }}</template>
				</el-table-column>
				<el-table-column property="name" label="订单时间" />
				<el-table-column property="address" label="销售人员" />
				<el-table-column property="address" label="客户公司名称" />
				<el-table-column property="address" label="订单总金额" />
				<el-table-column property="address" label="提成" />
				<el-table-column property="address" label="发放金额" />
				<el-table-column property="address" label="类型" />
				<el-table-column property="address" label="开船状态" />
				<el-table-column property="address" label="备注" />
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link @click="Show=true">
							<span class="main-color">通过</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="p-[20px] v-flex v-row-right">
				<el-pagination color="#0054A6" background layout="prev, pager, next" :default-page-size="6"
					:total="1000" :pager-count="6" />
			</div>
		</el-card>
		<!-- 通过 -->
		<el-dialog v-model="Show" title="通过" width="20%">
			<div>
				<div class="main-color v-flex v-col-top">
					<span>备注：</span>
					<el-input type="textarea" :rows="3" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
				</div>
				<div class="text-center mt-[30px] pb-[20px]">
					<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">确认</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const formData = reactive({
		Number: '',
		type: '',
	})
	const lists = ref<Array<any>>([
		{ type: '出库单' }, { type: '入库单' }, { type: '出库单' }
	])
	enum NoticeEnums {
		All = 1,
		PLATFORM = 2,
		HasRead = 3
	}
	const tabsActive = ref(NoticeEnums.All)
	const tabsMap = [
		{
			name: '全部',
			type: 1
		},
		{
			name: '未发放',
			type: 2
		},
		{
			name: '发放中',
			type: 2
		},
		{
			name: '已发放',
			type: 2
		},
	]
	interface User {
		date : string
		name : string
		address : string
	}
	const multipleTableRef = ref<InstanceType<typeof ElTable>>()
	const multipleSelection = ref<User[]>([])
	const toggleSelection = (rows ?: User[]) => {
		if (rows) {
			rows.forEach((row) => {
				// TODO: improvement typing when refactor table
				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
				// @ts-expect-error
				multipleTableRef.value!.toggleRowSelection(row, undefined)
			})
		} else {
			multipleTableRef.value!.clearSelection()
		}
	}
	const handleSelectionChange = (val : User[]) => {
		multipleSelection.value = val
	}
	const Show = ref(false)
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label {
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}

	.el-set-form:deep() .el-input__inner {
		height: 36px;
	}

	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}

	:deep() .el-dialog__title {
		color: var(--el-text-color-main);
	}

	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>